<template>
  <div class="page-header">
    <el-form :inline="true" :model="data.queryForm">
      <el-form-item label="输入框：">
        <el-input v-model="data.queryForm.input" />
      </el-form-item>
      <el-form-item label="下拉框：">
        <el-select v-model="data.queryForm.select">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="时间选择：">
        <el-date-picker v-model="data.queryForm.datePicker" type="daterange" start-placeholder="开始日期"
          end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button @click="reQueryForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>

  <div class="flex-col-table">
    <el-button type="primary" @click="add">新增人员</el-button>
    <el-table :empty-text="i18n.fy.nodata" :data="data.tableData" height="100%" v-loading="data.loading"
      :element-loading-text="i18n.fy.loading">
      <el-table-column prop="date" label="姓名1" />
      <el-table-column prop="name" label="岗位" />
      <el-table-column prop="address" label="手机号1" />
      <el-table-column prop="address" label="账号类型" />
      <el-table-column prop="address" label="店铺名称" />
      <el-table-column prop="address" label="注册时间" />
      <el-table-column prop="address" label="权限" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
          <el-button link type="danger" size="small" @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="onChanSize" @current-change="onChanPage" v-model:current-page="data.queryForm.pageNum"
      v-model:page-size="data.queryForm.pageSize" :total="data.total" />

  </div>

  <el-dialog v-model="data.dialog" title="新增人员" width="400px">
    <el-form :model="data.form" ref="formRef" :rules="data.rules">
      <el-form-item label="岗位：" prop="role">
        <el-select v-model="data.form.role">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="姓名：" prop="name">
        <el-input v-model="data.form.name" />
      </el-form-item>
      <el-form-item label="电话：" prop="phone">
        <el-input v-model="data.form.phone" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="data.dialog = false">取消</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup>

let data = reactive({
  queryForm: {
    pageNum: 1,
    pageSize: 20
  },
  tableData: [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ],
  total: 0,
  dialog: false,
  form: {},
  rules: {
    name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
    role: [{ required: true, message: '请选择岗位', trigger: 'change' }]
  }
})


const reQueryForm = () => { // 重置查询表单
  data.queryForm = {
    pageNum: 1,
    pageSize: 20
  }
}


const currentChange = (page) => {
  // 
  pageData.queryForm.pageNum = page
  getList()
}

const sizeChange = (size) => {
  data.queryForm.pageSize = size
  getList()
}

const add = () => {  // 新增

}

const edit = (row) => { // 编辑



}
const onChanSize = (e) => {
  //修改分页数
  // 
  data.queryForm.pageNum = 1;
  data.queryForm.pageSize = e;
  getList();
}
const onChanPage = (e) => {
  //修改分页
  // 
  data.queryForm.pageNum = e;
  getList();
}

const del = (row) => { // 删除
  ElMessageBox.confirm('确认删除?', '提示').then(() => {

  })
}

let formRef = ref(null)

const submit = () => { // 提交新增/编辑表单
  formRef.value.validate(valid => {
    if (valid) {

    }
  })
}

const getList = () => { // 获取表格数据
  data.loading = true;

  data.loading = false;
}
</script>

<style scoped></style>